<template>
    <div class="home ">
      <van-nav-bar
        title="健康管理"
        left-text="返回"
        left-arrow
      />
      <van-tabs v-model:active="activeName">
        <van-tab title="健康档案" name="a">
            <ConentOne/>
        </van-tab>
        <van-tab title="疫苗接种" name="b">
            <ConentTwo/>        
        </van-tab>
        <van-tab title="幼儿服药" name="c">
          <ConentThree/> 
        </van-tab>
      </van-tabs>
    </div>
  </template>
  
  <script lang="ts">
  import { ref } from 'vue';
  import ConentOne from './ConentOne.vue';
  import ConentTwo from './ConentTwo.vue';
  import ConentThree from './ConentThree.vue';
  
  export default {
    components: { ConentOne, ConentTwo, ConentThree },
    setup() {
      const activeName = ref('a');
      return { activeName };
    },
  };
  
  </script>
  
  <style  >
    :root {
    --van-nav-bar-icon-color: white;
    --van-nav-bar-background-color: 		#00BFFF;
    --van-nav-bar-text-color: white;
    --van-nav-bar-title-text-color: white;
    --van-tabs-bottom-bar-color:#00BFFF;
  }
  </style>
  